<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
// react是用JS写的，在JS里面clss是关键字，所以使用className,react底层做了兼容
// react中，单标签都要写结尾符号 /> =>  <img src="" alt=""/>

      // React code will go here
      // JSX
      class App extends React.Component {
        render() {
          <div className="app" key="1">
            <img src="" alt=""/>
            <img src="" alt=""/>
            <img src="" alt=""/>
            <p>hello</p>
          </div>
        }
      }
      ReactDOM.render(<App />, document.getElementById('root'))


      // JSX =>语法 必须借助Babel编译（声明式）
      // JSX: 帮助实现react的组件化，帮助生成react的元素，js的语法扩展。联想到模板语言


      // 实际上JSX就是通过babel，把react的组件化语法转换成JS，提升效率
      // JSX 可以生成 React “元素”。

// 过程式
class App extends React.Component {
  render() {//括号里 第一个参数是标签名，第二个是属性对象，第三个都是子元素
    /*#__PURE__*/React.createElement("div", {//标签名
      className: "app",//属性对象
      key:"1"//属性对象
    },/*#__PURE__*/React.createElement("img", {
        src: "",
        alt: ""
      }), /*#__PURE__*/React.createElement("img", {//img没有子元素，所以就两个
        src: "",
        alt: ""
      }), /*#__PURE__*/React.createElement("img", {
        src: "",
        alt: ""
      }),/*#__PURE__*/React.createElement("p", null, "hello")) 
  }
}
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));
    </script>
  </body>
</html>